<!DOCTYPE html>
<html>
  <head>
    <title>Canvas 反向绘制弯曲线</title>
    <style>
      /* Set the canvas CSS width and height to the scaled resolution */
      canvas {
        width: 400px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="400"></canvas>

    <script>
      // 当页面加载完成时执行以下代码
      window.addEventListener('load', () => {
        // 获取 Canvas 元素和上下文
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 获取设备像素比例
        const devicePixelRatio = window.devicePixelRatio || 1;

        // 设置 canvas 的实际显示大小
        canvas.style.width = canvas.width + 'px';
        canvas.style.height = canvas.height + 'px';

        // 调整 canvas 分辨率以匹配设备像素比例
        canvas.width *= devicePixelRatio;
        canvas.height *= devicePixelRatio;

        // 设置起点和终点的坐标，反过来
        const startX = 250;
        const startY = 100;
        const endX = 50;
        const endY = 100;

        // 开始绘制路径
        ctx.beginPath();
        // 将绘图游标移动到起点的位置
        ctx.moveTo(startX * devicePixelRatio, startY * devicePixelRatio);
        // 使用二次贝塞尔曲线绘制弯曲线，参数依次为控制点的坐标和终点的坐标
        ctx.quadraticCurveTo(
          150 * devicePixelRatio,
          150 * devicePixelRatio,
          endX * devicePixelRatio,
          endY * devicePixelRatio
        ); // 调整控制点的位置
        // 绘制路径
        ctx.stroke();
      });
    </script>
  </body>
</html>
